<template>
	<div>
	   	<div id='line'></div>
    </div>
</template>
<script>
export default {
    name:'Ahow',
    data() {
        return {
        chart: null,
        corlorList:['0,136,212','137, 189, 27','219, 50, 51','0,245,255','174,238,238','150,205,205','255,218,185','230,230,250','123,104,238','0,255,255'],
        dataList:[
            {
            name:111,
            data:[80, 82, 91, 34, 50,60, 70, 85, 45, 92, 65, 62]
            },
            {
            name:222,
            data:[90, 80, 75, 85, 92, 65, 72, 80, 82, 91, 74, 80]
            },
            {
            name:333,
            data:[85.3, 82, 85, 75, 82, 91, 64, 80, 90, 80, 65, 82]
            },
            {
            name:444,
            data:[88.3, 87, 65, 95, 72, 95, 74, 83, 91, 70, 75, 72]
            },
            {
            name:555,
            data:[69.3, 62, 75, 65, 87, 81, 74, 60, 83, 84, 76, 77]
            },
            {
            name:666,
            data:[75.3, 84, 82, 90, 88, 71, 84, 86, 70, 84, 85, 82]
            }
        ],
        //时间数据列表，元素为时间(date)
        dateList:['13:00', '13:05', '13:10', '13:15', '13:20', '13:25', '13:30', '13:35', '13:40', '13:45', '13:50', '13:55']
        }
    },
    //挂载的时候渲染数据上去
    mounted(){
        const myChart = this.$echarts.init(document.getElementById("line"));
        //建议加上以下这一行代码，不加的效果图如下（当浏览器窗口缩小的时候）
        window.addEventListener("resize", function() {
            myChart.resize();
        });
        myChart.setOption((()=>{
            let optionObj = {
            backgroundColor: '#394056',
            title: {
            top: 10,
            text: '出勤率统计',
            x: 'center',
            textStyle: {
                fontWeight: 'normal',
                fontSize: 16,
                color: '#F1F1F3'
            },
            },
            tooltip: {
            trigger: 'axis',
            formatter:function(params)
            {
                var relVal = params[0].name;
                for (var i = 0, l = params.length; i < l; i++) {
                    relVal += '<br/>'+ params[i].marker + params[i].seriesName + ' : ' + params[i].value+"%";
                }
                return relVal;
            },
            axisPointer: {
                type:'line',
                lineStyle: {
                color: '#57617B'
                }            
            }
            },
            legend: {
            top: 30,
            type: 'scroll',
            pageIconColor:'rgb(24,144,255)',
            pageIconInactiveColor:'#2f4554',
            icon: 'circle',
            itemWidth: 14,
            itemHeight: 10,
            itemGap: 10,
            right: '4%',
            textStyle: {
                fontSize: 12,
                color: '#F1F1F3'
            }
            },
            grid: {
            top: 100,
            left: '2%',
            right: '2%',
            bottom: '20%',
            containLabel: true
            },
            xAxis: [{
            type: 'category',
            boundaryGap: false,
            axisLine: {
                lineStyle: {
                color: '#57617B'
                }
            },
            data: this.dateList
            }],
            yAxis: [{
            type: 'value',
            name: '出勤率',
            nameTextStyle:{
                fontStyle : 'normal',
                fontSize: 16,
                color:'#FFF'
            },
            axisTick: {
                show: false
            },
            axisLine: {
                lineStyle: {
                color: '#57617B'
                }
            },
            axisLabel: {
                margin: 10,
                textStyle: {
                fontSize: 12
                },
                formatter:function(params)
                { 
                return params+'%';
                },
            },
            splitLine: {
                lineStyle: {
                color: '#57617B'
                }
            }
            }],
            series: []
            }

            const dataList = this.dataList;
            for (const key in dataList) {
            if (Object.hasOwnProperty.call(dataList, key)) {
                optionObj.series.push({
                name: dataList[key].name,
                type: 'line',
                smooth: true,
                symbol: 'circle',
                symbolSize: 1,
                showSymbol: false,
                lineStyle: {
                normal: {
                    width: 1
                }
                },
                areaStyle: {
                normal: {
                    color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                    offset: 0,
                    color: `rgba(${this.corlorList[key]}, 0.3)`
                    }, {
                    offset: 0.8,
                    color: `rgba(${this.corlorList[key]}, 0)`
                    }], false),
                    shadowColor: 'rgba(0, 0, 0, 0.1)',
                    shadowBlur: 10
                }
                },
                itemStyle: {
                normal: {
                    color: `rgba(${this.corlorList[key]})`,
                    borderColor: `rgba(${this.corlorList[key]}, 0.2)`,
                    borderWidth: 12
                }
                },
                data: dataList[key].data
            })
            }
            }
            //需要返回一个对象
            return optionObj;
        })());
        
    }
}
</script>
<style scoped> 
#line{
  width: 100%;
  height: calc(100vh - 84px);
  margin: 0 auto;
}
</style>
